<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-27 10:53:03
 * @LastEditors: by
 * @LastEditTime: 2021-11-29 16:41:56
-->
<template>
    <el-dialog
        ref="dialogForm"
        title="审批"
        :model-value="dialogVisibled"
        width="40%"
        custom-class="chatDialog"
        :before-close="handleClose"
        @opened="handleGetData">
        <el-form 
            ref="form"
            :rules="rules"
            :loading="loading" 
            :model="form"  
            label-width="120px" 
            label-position="left">
       
        <!-- <el-form-item label="审批部门：" prop="name">
            <el-input placeholder="审批部门"></el-input>
        </el-form-item> -->
            <el-form-item label="审批结果：" prop="state">
                <el-radio v-model="form.state" label="1">同意</el-radio>
                <el-radio v-model="form.state" label="2">不同意</el-radio>
            </el-form-item>
            <el-form-item label="审批说明：" prop="memo">
                <el-input :rows="4" placeholder="审批说明" type="textarea" v-model="form.memo"></el-input>
            </el-form-item>
         </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">保 存</el-button>
                <el-button @click="handleClose">关 闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import processApi from '@/api/approval'
import commonApi from '@/api/index'
export default {
    name: 'dashboardDialgo',
    emits: ['close', 'done'],
    props: {
        dialogVisible: {
            default: false,
            type: Boolean
        },
        listId: {
            default: () => ''
        }
    },
    computed: {
        dialogVisibled() {
            return this.dialogVisible
        }
        
    },
    data() {
        return {
            loading: false, 
            form: {
                id: '',
                memo: '',
                state: ''
            },
            stateList: [],
            rules: {
                state: [
                    { required: true, message: '请选择审批结果', trigger: ['change'], }
                ],
            }
        }
    },
    methods: {
        handleClose() {
            this.$emit('close')
        },
        handleSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    processApi.saveSpJl(this.form)
                        .then(res => {
                            this.$message.success(res.message||'审核完成')
                            this.$emit('done')
                        })
                        .catch(err => {
                            this.$message.error(err.message||'审核失败')
                        })
                } else {
                    return false
                }

            })
            
        },
        handleGetData() {
            // let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            // this.form.id = userInfo.id
            this.form.id = this.listId
            this.getStateList()
        },
        // getDeptList() {
        //     userApi.getlistCombobox()
        //         .then(res => {
        //             this.deptList = res.data
        //         })
        //         .catch(err => {
        //             this.$message.error(err.message)
        //         })
        // },
        getStateList() {
            commonApi.getDicType({dictType: 'SPZT'})
                .then(res => {
                    this.stateList = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-dialog__body {
    >div {
        margin-bottom: 10px;
    }
}
.select {
    margin: 10px 0;
    >div {
       margin: 0 10px; 
    }
}
.normal {
    color: #0AD100;
}
.abnormal {
    color: #FF4242;
}

</style>